<template>
  <view class="page-content flex-col">
    <view class="cards-list">
      <view class="cards" v-for="(item, index) in datalist" :key="index">
        <view class="flex-row items-center justify-between">
          <view style="border-radius: 50%; border: 6rpx solid #fcd610">
            <u-image
              height="116rpx"
              width="116rpx"
              src="https://cdn.uviewui.com/uview/example/fade.jpg"
              shape="circle"
            ></u-image>
          </view>
          <view class="flex-row items-center justify-between">
            <image
              src="/static/common/edit-icon.png"
              style="height: 37rpx; width: 37rpx; margin-right: 16rpx"
            ></image>
            <image
              src="/static/common/delete.png"
              style="height: 58rpx; width: 58rpx"
            ></image>
          </view>
        </view>
        <view class="name mt-16"> cwuming </view>
        <view class="detail mt-16">
          <view class="flex-row">
            <text class="font_2">年龄</text>
            <text class="font_3 ml-15">3岁6个月</text>
          </view>
          <view class="flex-row">
            <text class="font_2">品种</text>
            <text class="font_3 ml-15">3岁6个月</text>
          </view>
          <view class="flex-row">
            <text class="font_2">性别</text>
            <text class="font_3 ml-15">3岁6个月</text>
          </view>
          <view class="flex-row">
            <text class="font_2">颜色</text>
            <text class="font_3 ml-15">3岁6个月</text>
          </view>
          <view class="flex-row">
            <text class="font_2">体重</text>
            <text class="font_3 ml-15">3岁6个月</text>
          </view>
          <view class="flex-row">
            <text class="font_2">城市</text>
            <text class="font_3 ml-15">3岁6个月</text>
          </view>
          <view class="flex-row">
            <text class="font_2">疫苗接种信息</text>
            <text class="font_3 ml-15">已接种</text>
          </view>
        </view>
      </view>
    </view>
    <view class="submit" @click="addPetCard"> 新增 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      datalist: [{}, {}, {}],
    };
  },
  methods: {
    addPetCard() {
      uni.navigateTo({
        url: "/page_index/me/components/addPetCard/addPetCard",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  width: 100%;
  padding: 0 32rpx;
  background: linear-gradient(180deg, #fcd610 0%, #f6f6f6 20%, #f6f6f6 100%);
  overflow-y: auto;

  .cards-list {
    height: 100%;
    overflow-y: auto;

    .cards {
      margin-bottom: 16rpx;
      border: 4rpx solid #000;
      width: 100%;
      padding: 32rpx;
      background-color: #fff;
      border-radius: 16rpx;

      .name {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
      }

      .detail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22rpx 24rpx;

        .ml-15 {
          margin-left: 30rpx;
        }

        .font_2 {
          font-size: 28rpx;
          font-family: PingFang SC;
          color: #999999;
        }

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          color: #000000;
        }
      }
    }
  }

  .submit {
    height: 108rpx;
    background: #fcd610;
    border-radius: 68rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 108rpx;
    text-align: center;
  }
}
</style>
